<template>
  <div>
    <div class="block">
      <el-carousel height="300px">
        <el-carousel-item v-for="item in imgUrl" :key="item.id">
          <img :src="item.url" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgUrl: [
        {
          id: 1,
          url: 'http://localhost:3000/public/uploads/ad1.jpg'
        },
        {
          id: 2,
          url: 'http://localhost:3000/public/uploads/ad2.jpg'
        },
        {
          id: 3,
          url: 'http://localhost:3000/public/uploads/ad3.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.el-carousel {
  border-radius: 1%;
}

.img {
  width: 100%;
}
</style>
